<!-- 新增填空页面 -->
<template>
  <div class="multipChoice">
    <el-container>
      <el-container>
        <!-- 左侧 -->
        <el-aside style="width: 50%">
          <el-form
            :model="completionForm"
            ref="multipChoiceForm"
            label-width="80px"
          >
            <el-form-item label="题干" prop="name">
              <el-input
                v-model="completionForm.name"
                placeholder="请输入内容"
                label-position="left"
                style="width: 100%"
                suffix-icon="el-icon-plus"
                @change="onChangeValue"
              ></el-input>
            </el-form-item>
            <!-- 标答区域 -->
            <el-form-item label="标答">
              <!-- 默认标答区域 -->
              <el-form-item
                v-for="(option, index) in completionForm.options"
                :key="option.key"
                :prop="'options.' + index + '.value'"
                style="margin-bottom: 5%"
              >
                <div>
                  <el-tag v-text="option.mappingOption">C</el-tag>
                  <span>&emsp;</span>
                  <el-input
                    v-model="option.value"
                    placeholder="请输入内容"
                    label-position="left"
                    style="width: 55%"
                    suffix-icon="el-icon-plus"
                  ></el-input>
                  <el-input-number
                    v-model="option.num"
                    placeholder="分值"
                    label-position="left"
                    controls-position="right"
                    style="width: 25%"
                    suffix-icon="el-icon-plus"
                    :min="0"
                    :max="5"
                    @change="onChangeNumber"
                  ></el-input-number>
                </div>
              </el-form-item>
            </el-form-item>
            <!-- 疑惑解析 -->
            <el-form-item label="解析" prop="analysis">
              <el-input
                v-model="completionForm.analysis"
                placeholder="请输入内容"
                label-position="left"
                style="width: 100%"
                suffix-icon="el-icon-plus"
              ></el-input>
            </el-form-item>
            <!-- 总分值 -->
            <el-form-item label="总分值" prop="num">
              <span
                v-text="completionForm.num"
                label-position="left"
                style="width: 100%"
              ></span>
            </el-form-item>
            <!-- 难度 -->
            <el-form-item label="难度" prop="difficulty">
              <div class="block" style="padding-top: 2.9%; margin-right: 10%">
                <el-rate v-model="completionForm.difficulty"></el-rate>
              </div>
            </el-form-item>
            <!-- 操作区域 -->
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="onResetFrom('completionForm')">重置</el-button>
              <!-- <el-button type="primary" @click="onCreateMutipleChoice">添加选项</el-button> -->
            </el-form-item>
          </el-form>
        </el-aside>
        <!-- 右侧预览 -->
        <el-main style="width: 50%; padding: 0%">
          <el-form
            :model="completionForm"
            ref="completionForm"
            label-width="80px"
          >
            <el-form-item label="题干" prop="name">
              <span
                v-text="completionForm.name"
                label-position="left"
                style="width: 100%"
              ></span>
            </el-form-item>
            <!-- 标答区域 -->
            <el-form-item label="标答">
              <!-- 默认标答区域 -->
              <el-form-item
                v-for="(option, index) in completionForm.options"
                :key="option.key"
                :prop="'options.' + index + '.value'"
                style="margin-bottom: 5%"
              >
                <div>
                  <span v-text="option.mappingOption">C</span>
                  <span>&emsp;</span>
                  <!-- 内容预览 -->
                  <span
                    v-text="option.value"
                    label-position="left"
                    style="width: 55%"
                  ></span>
                  <!-- 分值预览 -->
                  <span>
                    (
                        <span
                        v-text="option.num"
                        placeholder="分值"
                        label-position="left"
                        controls-position="right"
                        style="width: 25%"
                        suffix-icon="el-icon-plus"
                        ></span>
                        <span>分</span>
                    )
                  </span>
                </div>
              </el-form-item>
            </el-form-item>
            <!-- 疑惑解析 -->
            <el-form-item label="解析" prop="analysis">
              <span
                v-text="completionForm.analysis"
                placeholder="请输入内容"
                label-position="left"
                style="width: 100%"
                suffix-icon="el-icon-plus"
              ></span>
            </el-form-item>
            <!-- 分值 -->
            <el-form-item label="总分值" prop="num">
              <span
                v-text="completionForm.num"
                label-position="left"
                controls-position="right"
                style="width: 100%"
                :min="1"
                :max="10"
              ></span>
            </el-form-item>
            <!-- 难度 -->
            <el-form-item label="难度" prop="difficulty">
              <div class="block" style="padding-top: 2.9%; margin-right: 10%">
                <el-rate v-model="completionForm.difficulty" disabled></el-rate>
              </div>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {testHello} from '@/api/completion'
export default {
  data() {
    return {
      // 表单数据
      completionForm: {
        // 题干
        name: "",
        // 默认标答区域
        options: [
        //   {
        //     mappingOption: "1.",
        //     value: "",
        //     num: 0,
        //   }
        ],
        // 解析
        analysis: "",
        // 分值
        num: 0,
        // 难度
        difficulty: 1,
      },
    };
  },
  methods: {
    //   提交表单
    onSubmit() {
      // 将表单数据转化为JSON格式
      var json = JSON.stringify(this.completionForm);
      alert(json);
    //   请求接口
        testHello().then( res => {
            console.log(res);
        }).catch( err => {
            console.log("出错喽！");
            this.$message({
              showClose: true,
              message: "后台接口异常！",
              type: "warning",
            });
            return;
        })
    },
    // 题干失去焦点触发事件，提取_数量
    onChangeValue() {
        const name = this.completionForm.name;
        console.log("完整字符换："+name);
        var countNum = 0;
        for(var i = 0;i < name.length;i++) {
            // 匹配字符串_
            const str = "_";
            if (str == name[i]) {
                countNum++;
            }
        }
        console.log("总出现次数："+countNum);
        // 更新标答
        // 清空重新定义
        this.completionForm.options = [];
        for(var i = 1;i <= countNum;i++) {
            // 新增选项区域
            this.completionForm.options.push({
                mappingOption: i+'.',
                value: '',
                num: 0,
                key: Date.now(),
            });
        }
    },
    // 分值触发计算总分值
    onChangeNumber() {
        const length = this.completionForm.options.length;
        // console.log(length);
        var countNum = 0;
        for(var i = 0;i < length;i++) {
            var num = this.completionForm.options[i].num;
            // 如果未定义值，默认赋值0
            if(typeof(num) == "undefined") {
                num = 0;
                this.completionForm.options[i].num=num;
            }
            countNum +=num;
        }
        this.completionForm.num = countNum;
    },
    // 重置表单数据
    onResetFrom(formName) {
      // 重置必须使用prop标签否则无效
      this.$refs[formName].resetFields();
      // 清空重新定义
      this.completionForm.options = [];
      // 重置data中的某个Form表单
      // console.log(formName);
      // this.completionForm = this.$options.data().completionForm;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.s {
  margin-bottom: 5%;
  margin: 0%;
}
</style>